<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-05-11 15:24:29
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-05-10 14:40:42
 * @Description: 
-->
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" :isCollapse="true"
          @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <div class="logo">
            <h1 class="logo-img-container">
              <el-image :src="logo" style="width: 40px;height: 40px" fit="cover"></el-image>
            </h1>
            <h2 style="min-width:200px">灌区灌溉遥感动态监测系统</h2>
          </div>
          <!-- <el-menu-item index="/index/process/task">灌区遥感监测任务配置</el-menu-item> -->
          <el-menu-item index="/index/flow1">灌区遥感监测任务配置</el-menu-item>
          <el-menu-item index="/index/review/publish">灌区遥感监测任务管理</el-menu-item>
          <el-menu-item index="/index/display2">土壤含水量与蒸散发协同反演子模块</el-menu-item>
          <el-menu-item index="/index/display1">灌区灌溉动态监测成果管理</el-menu-item>
          <el-menu-item index="/index/display3">田间水循环模型管理</el-menu-item>
          <el-menu-item index="/index/display">灌区站点监测数据管理</el-menu-item>
          <!-- <el-menu-item index="/index/display">灌区实测数据</el-menu-item> -->
          <div class="flex-grow"></div>
          <el-sub-menu index="">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>当前用户</template>
            <el-menu-item index="/index/userInfo">
              <el-icon>
                <Postcard />
              </el-icon>
              用户信息
            </el-menu-item>
            <el-menu-item index="exit"><el-icon>
                <SwitchButton />
              </el-icon>退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>
  
<script lang="ts" setup>
import logo from '@/assets/logo/logo.png'
import router from '@/router'
import { reactive, ref, watch } from 'vue'
import { useProcesStore } from '@/store/process'

import { useRoute, useRouter } from 'vue-router'
import { UserFilled, Postcard, SwitchButton } from "@element-plus/icons-vue";
import { getToken, setToken, removeToken } from "@/utils/auth";
const procesStore = useProcesStore()
const route = useRoute()
//修改Pinia的state
const handleChange = () => {
  procesStore.menu.isCollapse = !procesStore.menu.isCollapse
};
const state = reactive({
  activeIndex: router.currentRoute.value.path
})
const handleSelect = (key: string, keyPath: string[]) => {
  switch (key) {
    case '/index/process/task':
      router.push('/index/process/task');
      break;
    case '/index/review/publish':
      router.push('/index/review/publish')
      break;
    case '/index/display':
      router.push('/index/display')
      break;
    case '/index/display1':
      router.push('/index/display1')
      break;
    case '/index/display2':
      router.push('/index/display2')
      break;
    case '/index/display3':
      router.push('/index/display3')
      break;
    case '/index/users':
      router.push('/index/users')
      break;
    case '/index/userInfo':
      router.push('/index/userInfo')
      break;
    case '/index/flow1':
      router.push('/index/flow1')
      break;
    case 'exit':
      removeToken()
      router.push('/login')
      break;
    default:
      break;
  }
}

</script>
<style lang="scss">
.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 100px;

  .logo-img-container {
    margin-left: 20px;
  }

  h2 {
    margin-left: 20px;
    font-size: 16px;
    color: #fff;
  }
}
</style>
<style lang="scss" scoped>
.flex-grow {
  flex-grow: 1;
}
</style>